<!--    -*- Mode: Js -*-  -->
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://wattdepot-gdata.googlecode.com/svn/trunk/javascript/ajile/com.iskitz.ajile.js?mvcoff,mvcshareoff,refresh"></script>
<script type="text/javascript" src="http://wattdepot-gdata.googlecode.com/svn/trunk/javascript/org.wattdepot.gdata.GDataLoader.js"></script>
<script type="text/javascript" src="http://wattdepot-gdata.googlecode.com/svn/trunk/javascript/org.wattdepot.gdata.kukuicup.Timestamp.js"></script>
 
<script type="text/javascript">
// Wrap this code in an anonymous self-invoking function to avoid polluting global namespace.
(function() {
  // A spreadsheet containing sparkosummary data.
  var spreadsheetURL = 'http://spreadsheets.google.com/tq?key=0An9ynmXUoikYdHdqMXVEckp5eWFwXzdSNjJMa2JvNUE&range=A1:J27&gid=0';
  // How frequently we want this spreadsheet data to be refreshed in the visualization.
  var refreshInterval = 30; 
  // Load the visualization API and the spreadsheet data, then call displayDormData.
  var loader = new org.wattdepot.gdata.GDataLoader(spreadsheetURL, refreshInterval, displayDormData); 

  // Width of this visualization.
  var width = 150; 
  var green = '#459E00';
  var yellow = '#FFCC00';
  var red = '#FF0000';
      
  function displayDormData(datatable) {
    displaySpark(datatable, [2], 0, 5, 'lastHr_div', red);
    displaySpark(datatable, [3], 0, 23, 'lastDay_div', yellow);
    displaySpark(datatable, [4], 0, 6, 'lastWk_div', green);
    displayBaseline(datatable, 'baseline_div');
  }

  function displaySpark(datatable, columns, startRow, endRow, divName, colorName) {
    var view = new google.visualization.DataView(datatable);
    view.setColumns(columns);
    view.setRows(startRow, endRow);
    var chart = new google.visualization.ImageSparkLine(document.getElementById(divName));
    chart.draw(view, {color: colorName, width: width, height: 10, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
  }

  function displayBaseline(datatable, divName) {
    var cumColumnIndex = datatable.addColumn('number','Cumulative Energy');
    var cumTotal = 0;
    var i;
    for (i =0; i < 7; i++) {
      cumTotal += datatable.getValue(i, 4);
      datatable.setValue(i, cumColumnIndex, cumTotal);
    }
    var view = new google.visualization.DataView(datatable);
    view.setColumns([7,8,9,cumColumnIndex]);
    view.setRows(0,6);
    view.addColumn
    var chart = new google.visualization.AreaChart(document.getElementById(divName));
    chart.draw(view, {
      width: width, 
      height: width, 
      colors: [red, green, 'white'],
      legend: 'none',
      pointSize: 0,
    });
  }
})();
</script>

</script>
<style type="text/css">
  .sparkostatus-global {font-family:Verdana,sans-serif}
  .sparkostatus-div {width:150px;text-align:center}
  .sparkostatus-header {margin:6px 0px 3px 0px;width:150px;text-align:center;background-color:#cccccc;font-variant:small-caps;font-weight:normal;font-size:0.8em}
  .sparkostatus-baseline-fix {position:relative;margin-top:-20px;z-index:-1}
  .sparkostatus-info {font-size: 0.7em; font-weight: normal; width:150px; text-align:center}
</style>
</head>

<body>
<div id="chartdiv" class="sparkostatus-global">
  <div id="dormName" class="sparkostatus-div" style='font-size: 1.0em; font-weight: bold;'>Lehua 5-6</div>
  <div class="sparkostatus-header">Overall Status</div>
  <div class="sparkostatus-div"><img src="smiley.happy.green.orig.png"/></div>
  <div class="sparkostatus-header">Current Power</div>
  <div id="current" class="sparkostatus-div" style='color: #FFCC00; font-size: 1.5em; font-weight: bold;'>1587 kW</div>
  <div id="current" class="sparkostatus-info">(5% over baseline)</div>
  <div class="sparkostatus-header">Recent Trends</div>
  <div id="lastHr_div"></div>
  <div id="lastDay_div"></div>
  <div id="lastWk_div"></div>
  <div class="sparkostatus-header">Use vs. Baseline</div>
  <div id="baseline_div" class="sparkostatus-baseline-fix"></div>
  <div id="lastUpdate" class="sparkostatus-info">Updated: 6/25/10 9:43am</div>
</div>
</body>
</html>


